<template>
  <div :ref="id" class="vue-chart-box"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    props: {
        data: {
            type: Array,
            required: false,
            default: () => [
                ['周一', 120],
                ['周二', 132],
                ['周三', 101],
                ['周四', 134],
                ['周五', 90],
                ['周六', 230],
                ['周日', 210],
            ],
        },
        xAxisStyle: {
            type: Object,
            required: false,
            default: () => ({
                color: '#333',
                show: true,
                fontSize: '12px',
            })
        },
        yAxisStyle: {
            type: Object,
            required: false,
            default: () => ({
                color: '#333',
                show: true,
                fontSize: '12px',
            })
        },
        color: {
            type: Array,
            required: false,
            default: () => ['#4e72b8', '#181d4b', '#f47920', '#aa2116', '#fcaf17'],
        },

    },
    data() {
        return {
            id: new Date().getTime().toString(),
        };
    },
    mounted() {
        this.myChart = echarts.init(this.$refs[this.id]);
        this.init();
        const resizeObserver = new ResizeObserver(entries => {
            if (this.myChart) {
                this.myChart.resize();
            }
        });
        resizeObserver.observe(this.$refs[this.id]);
    },
    methods: {
        init() {
            const xData = this.data.map(vo => vo[0]);
            const series = [];
            const seriesLen = this.data[0].length - 1;
            for (let i = 0; i < seriesLen; i++) {
                series.push({
                    data: this.data.map((vo, index) => ({
                        value: vo[i + 1],
                        name: vo[0],
                        color: this.color[index % this.color.length],
                    })),
                    type: 'pie',
                    showSymbol: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    radius: ['40%', '70%'],
                });
            }
            const targetOption = {
                animation: true,
                animationDuration: 5000,
                grid: {
                    left: '0px',
                    bottom: '0px',
                    right: '0px',
                    top: '24px',
                    containLabel: true,
                },
                series,
            };
            this.myChart.setOption(targetOption);
        },
    }
}
</script>

<style lang="less" scoped>
.vue-chart-box {
    width: 100%;
    height: 100%;
}
</style>